<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body onload="init()">
		请选择：<select id="pro"></select>省<select id="city"></select>市
		<script type="text/javascript">
			let provinces=[]
			let pro=document.getElementById("pro")
			let city=document.getElementById("city")
			function init(){
				let xhr=new XMLHttpRequest()
				xhr.open("GET","cities.json",false)
				xhr.send()
				var data=xhr.responseXML
				provinces=JSON.parse(data)
				for (var i = 0; i < provinces.length; i++) {
					pro.options[i]=new Option(provinces[i].name)//将第i个省份名字写入第一个下拉列表
					for (var i = 0; i < provinces[0].city.length; i++) {
						city.options[i]=new Option(provinces[0].city[i])
					}
				}
				pro.onchange=function(){
					let n=pro.selectedIndex
					city.length=0
					for (var i = 0; i < provinces[n].city.length; i++) {
						city.options[i]=new Option(provinces[n].city[i])
					}
				}
			}
		</script>
	</body>
</html>
